/* 
 布局（grid）（.g-）：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等！
 模块（module）（.m-）：通常是一个语义化的可以重复使用的较大的整体！比如导航、登录、注册、各种列表、评论、搜索等！
 元件（unit）（.u-）：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中！比如按钮、输入框、loading、图标等！
 功能（function）（.f-）：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等！不可滥用！
 皮肤（skin）（.s-）：如果你需要把皮肤型的样式抽离出来，通常为文字色、背景色（图）、边框色等，非换肤型网站通常只提取文字色！非换肤型网站不可滥用此类！
 状态（.z-）：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现（.u-ipt.z-dis{}，.m-list li.z-sel{}），具体详见命名规则的扩展相关项。
 */

/* 元素样式初始化 */
view,
scroll-view,
swiper,
swiper-item,
cover-view,
cover-image,
icon,
text,
rich-text,
progress,
button,
checkbox,
form,
input,
label,
radio,
slider,
switch,
textarea,
navigator,
audio,
camera,
image,
video {
	box-sizing: border-box;
	font-weight: 400;
}

page {
	background-color: #F5F5F5;
}

image.loading::before {
	content: "";
	background-color: #f5f5f5;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -2;
}

button.button-hover,
.btn-hover {
	transform: translate(1rpx, 1rpx);
}

button::after {
	border: none;
}

button[disabled]:not([type]) {
	opacity: 0.6;
	color: #000;
}

.g-btn-view {
	padding: 54rpx 54rpx 100rpx;
}

.g-btn-view .u-info-btn {
	width: 300rpx;
}

radio {
	transform: scale(0.7);
}

/* 
 checkbox
 */
checkbox {
	position: relative;
	width: 36rpx;
	height: 36rpx;
}

checkbox .wx-checkbox-input {
	width: 36rpx;
	height: 36rpx;
}

/* checkbox::before {
	font-family: "icon";
	content: "\e645";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #ffffff !important;
	font-size: 32upx;
	pointer-events: none;
	transition: all 0.3s ease-in-out 0s;
	z-index: 9;
} 
checkbox .wx-checkbox-input::before {
	display: none;
} */
checkbox.round .wx-checkbox-input,
checkbox.round .uni-checkbox-input {
	border-radius: 100rpx;
}

checkbox.red[checked] .wx-checkbox-input,
checkbox.red.checked .uni-checkbox-input {
	background-color: #FF1E12 !important;
	border-color: #FF1E12 !important;
	color: #ffffff !important;
}

/* f-logo-bc */
.f-logo-bc {
	position: relative;
}
.f-logo-bc::after {
	content: '';
	display: inline-block;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 699.3rpx;
	height: 240.3rpx;
	background-image: url(/static/image/order/csj-logo.png);
	background-size: cover;
}


/* 
 车型
 */
.u-car-item {
	font-size: 26rpx;
}

.u-car-item .key {
	color: #999999;
	flex-shrink: 0;
	margin-right: 20rpx;
}

.u-car-item .value {
	color: #333;
}

.u-car-item .car-msg {
	margin-top: 16rpx;
}

.u-car-item .car-msg .key {
	width: 116rpx;
}

/* item-header */
.g-item-header {
	height: 110rpx;
	padding: 0 30rpx;
	border-bottom: 1px solid #f7f9fd;
}

/* 
 按钮
 */
.u-submit-btn-view {
	padding: 60rpx 100rpx 100rpx;
}

.u-submit-btn-view ..u-submit-btn {
	margin-top: 80rpx;
	box-shadow: 0px 18px 29px 0px rgba(220, 27, 16, 0.31);
}

.u-btn-primary {
	height: 88rpx;
	line-height: 88rpx;
	color: #FFFFFF;
	background: linear-gradient(267deg, rgba(255, 30, 18, 1), rgba(249, 94, 73, 1));
	border-radius: 50vh;
}

.u-btn-whilte {
	height: 88rpx;
	line-height: 88rpx;
	color: #FE2417;
	background: #FFFFFF;
	border-radius: 50vh;
}

.u-order-btn {
	width: 140rpx;
	height: 50rpx;
	padding: 0;
	margin: 0;
	line-height: 50rpx;
	background: linear-gradient(267deg, rgba(255, 30, 18, 1), rgba(249, 94, 73, 1));
	border-radius: 50vh;
	color: #FFFFFF;
	font-size: 24rpx;
}

.g-main.bottom::after {
	content: '';
	display: inline-block;
	width: 100%;
	height: 80rpx;
}

/* 
 上传图片
 */
.u-upload-item,
.u-upload-img {
	width: 144rpx;
	height: 144rpx;
}

.u-upload-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 22rpx;
	padding-top: 33rpx;
	border-radius: 14rpx;
	border: 2rpx dashed #999999;
}

.u-upload-item.id-card {
	width: 260rpx;
	height: 134rpx;
}

.u-upload-img {
	border: 6rpx;
}

.u-upload-img.id-card {
	width: 272rpx;
	height: 152rpx;
	border-radius: 10rpx;
}

/* 
 add-icon
 */
.u-add-icon {
	font-family: "icon";
	font-size: 46rpx;
	font-style: normal;
}

.u-add-icon.red {
	color: #FF1E12;
}

.u-add-icon.yellow {
	color: #FF9F09;
}

.u-add-icon:before {
	content: "\e6d8";
}

/* modal */
.u-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1110;
	opacity: 0;
	outline: 0;
	text-align: center;
	-ms-transform: scale(1.185);
	transform: scale(1.185);
	backface-visibility: hidden;
	perspective: 2000upx;
	background: rgba(0, 0, 0, 0.6);
	transition: all 0.3s ease-in-out 0s;
	pointer-events: none;
}

.u-modal.bottom-modal {
	margin-bottom: -1000rpx;
}

.u-modal.bottom-modal.z-show {
	margin-bottom: 0;
}

.u-modal .u-dialog {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	width: 680upx;
	max-width: 100%;
	background-color: #f8f8f8;
	border-radius: 10upx;
	overflow: hidden;
}

.u-modal.bottom-modal .u-dialog {
	width: 100%;
	border-radius: 0;
}

.u-modal::before {
	content: '\200B';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.u-modal.bottom-modal::before {
	vertical-align: bottom;
}


.u-modal.z-show {
	opacity: 1;
	transition-duration: 0.3s;
	-ms-transform: scale(1);
	transform: scale(1);
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: auto;
}

/* 
 list
 */
.u-list .u-item {
	height: 110rpx;
	padding: 0 30rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
}

.u-list.card-menu {
	overflow: hidden;
}

.u-list.card-menu .u-item {
	border-radius: 20rpx;
	margin: 14rpx 30rpx;
}

.u-list .u-item.border-bottom.sm-border::before {
	left: 30rpx;
	width: calc(200vw - 120rpx);
}

.u-list .u-item.border-bottom::before {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 200%;
	height: 200%;
	border-bottom: 1rpx solid #EEEEEE;
	border-radius: inherit;
	content: " ";
	-webkit-transform: scale(.5);
	transform: scale(.5);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	pointer-events: none;

}

.u-list .u-item.empty::after {
	content: '';
	display: inline-block;
	width: 26rpx;
	height: 26rpx;
	padding-left: 30rpx;
	color: #333;
}

.u-list .u-item.arrow::after {
	font-family: "icon";
	content: '\e6a3';
	color: #999999;
	padding-left: 30rpx;
}

.u-list .u-item.price::after {
	content: '元';
	font-size: 28rpx;
	padding-left: 30rpx;
}

.u-list .u-item.a::after {
	content: '台';
	font-size: 28rpx;
	padding-left: 30rpx;
}

.u-list .u-item .icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 20rpx;
}

.u-list .key {
	font-size: 30rpx;
	color: #333;
}

.u-list .key.required {
	position: relative;
}

.u-list .key.required::before {
	content: '*';
	color: #FF1E12;
	vertical-align: top;
}

.u-list .u-item .value {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	text-align: right;
}

.u-list .u-item .value.left {
	text-align: left;
}

.u-list .u-item .ph {
	font-size: 28rpx;
	color: #999;
}

.u-list .u-textarea {
	padding: 30rpx;
	position: relative;
}

.u-list .u-textarea textarea {
	width: 100%;
	font-size: 28rpx;
	margin-top: 30rpx;
}

.u-list .u-textarea .text-desc {
	position: absolute;
	bottom: 30rpx;
	right: 30rpx;
	font-size: 24rpx;
	color: #333333;
}

/* 
 订单信息item
 */
.u-order-msg-item {
	display: flex;
	flex-direction: row;
	font-size: 28rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
}

.u-order-msg-item .key {
	display: inline-block;
	width: 140rpx;
	color: #999999;
	margin-right: 46rpx;
}

.u-order-msg-item .value {
	flex: 1;
}

.f-w40p {
	width: 40%;
}

.f-w60p {
	width: 60%
}

.f-w116 {
	display: inline-block;
	width: 116rpx;
}

.f-w50p {
	width: 50%;
}

.f-hfull {
	height: 100%;
}

/* 
 f-bc 背景颜色
 */
.f-bc-whilte {
	background-color: #FFFFFF
}

/* 
 mask 遮罩
 */
.f-mask {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.f-pof {
	position: fixed;
}

/* 
 display: inline-block;
 */
.f-inline {
	display: inline-block;
}

/* flex 布局 */
.f-fcol {
	display: flex;
	flex-direction: column;
}

.f-frow {
	display: flex;
	flex-direction: row;
}

.f-fcen {
	display: flex;
	justify-content: center;
	align-items: center;
}

.f-frowsp {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.f-fwrap {
	flex-wrap: wrap;
}

.f-fcolsp {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.f-fcolcenx {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.f-fcolceny {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.f-fcolcen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.f-frowceny {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.f-f1 {
	flex: 1;
}

.f-frowspcen {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.f-fs0 {
	flex-shrink: 0;
}

/* 文字溢出 */
.f-toh {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.f-oh {
	overflow: hidden;
}

.f-price::before {
	content: '￥';
	font-size: 80%;
	margin-right: 4rpx;
}

/* 文字对齐 */
.f-tal {
	text-align: left;
}

.f-tac {
	text-align: center;
}

.f-tar {
	text-align: right;
}

.f-por {
	position: relative;
}

.f-poa {
	position: absolute;
}

/* 
 margin-top
 */
.f-mt5 {
	margin-top: 10rpx;
}

.f-mt8 {
	margin-top: 16rpx;
}

.f-mt10 {
	margin-top: 20rpx;
}

.f-mt12 {
	margin-top: 24rpx;
}

.f-mt13 {
	margin-top: 26rpx;
}

.f-mt15 {
	margin-top: 30rpx;
}

.f-mt17 {
	margin-top: 34rpx;
}

.f-mt20 {
	margin-top: 40rpx;
}

/* 
 margin-left
 */
.f-mlauto {
	margin-left: auto;
}

.f-ml15 {
	margin-left: 30rpx;
}

.f-ml20 {
	margin-left: 40rpx;
}

/* 
 margin-right
 */
.f-mr8 {
	margin-right: 16rpx;
}

.f-mr10 {
	margin-right: 20rpx;
}

.f-mr12 {
	margin-right: 24rpx;
}

.f-mr15 {
	margin-right: 30rpx;
}

.f-mr18 {
	margin-right: 36rpx;
}

.f-mr20 {
	margin-right: 40rpx;
}

.f-mr30 {
	margin-right: 60rpx;
}

/* 
 margin-bottom
 */
.f-mb7 {
	margin-bottom: 14rpx;
}

.f-mb8 {
	margin-bottom: 16rpx;
}

.f-mb10 {
	margin-bottom: 20rpx;
}

.f-mb13 {
	margin-bottom: 26rpx;
}

.f-mb15 {
	margin-bottom: 30rpx;
}

.f-mb20 {
	margin-bottom: 40rpx;
}

/* 
 padding
 */
.f-p15 {
	padding: 30rpx;
}

.f-p10 {
	padding: 20rpx;
}

/* 
 padding-top
 */
.f-pt15 {
	padding-top: 30rpx;
}

.f-pt20 {
	padding-top: 40rpx;
}

/* 
 padding-bottom
 */
.f-pb10 {
	padding-bottom: 20rpx;
}

.f-pb15 {
	padding-bottom: 30rpx;
}

.f-pb20 {
	padding-bottom: 40rpx;
}

/* 
 padding-right
 */
.f-pr15 {
	padding-right: 30rpx;
}

/* 
 padding-right
 */
.f-pl15 {
	padding-left: 30rpx;
}

.f-plr15 {
	padding: 0 30rpx;
}

/* 
 font-weight
 */
.f-fw650 {
	font-weight: 650;
}

.f-fw700 {
	font-weight: 700;
}

/* 
 font-size
 */
.f-fz11 {
	font-size: 22rpx;
}

.f-fz12 {
	font-size: 24rpx;
}

.f-fz13 {
	font-size: 26rpx;
}

.f-fz14 {
	font-size: 28rpx;
}

.f-fz15 {
	font-size: 30rpx;
}

.f-fz16 {
	font-size: 32rpx;
}

.f-fz20 {
	font-size: 40rpx;
}

.f-fz36 {
	font-size: 72rpx;
}

/* 
 border
 */
.f-bort {
	border-top: 1px solid #F7F9FD;
}

.f-borb {
	border-bottom: 1px solid #F7F9FD;
}

/*
 animation loading
 */
.f-loading {
	animation: loading 1s linear 0s infinite normal;
}

@keyframes loading {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}

	100% {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}
